<template>
  <div class="user-list">
   <Vmask :maskTitle='maskTitle' :maskData='maskData' :showMask='showMask' :maskWidth='maskWidth' @FnMask='FnMask'></Vmask>

    <div class="search mb15">
      <div class="row clearfix lh40">
             <div class="row-item clearfix fl mr15 mb15">
               <span class="row-item-title fl">工号：</span>
               <span class="fl span-input">
                 <el-input placeholder="请输入内容" v-model.trim="orderNo"></el-input>
               </span>
             </div>
             <div class="row-item fl ml15 pl15">
              <el-button type="primary" @click="FnSearch">查询</el-button>
            </div>
            <div class="row-item fl ml15 pl15">
              <el-button type="primary" @click="FnBatchDeletion">批量删除</el-button>
            </div>
           </div>
    </div>
    <div class="content-table">
         <div class="content-table-title">
           <div class="row clearfix">
             <div class="row-item fr">
             </div>
           </div>
         </div>
       <ShowTable :tableData='tableData' :selections='selections' :lableList='lableList' :talLength='talLength' :pageSize='pageSize' :pageNum='pageNum' @getSortableFn='getSortableFn'></ShowTable>
     </div>
  </div>
</template>

<script>
  import ShowTable from '../components/table/show-table'
import Vmask from '@/views/components/v-mask/v-mask'
import {UserList,Code,DeleteUser,UpdatePassword} from '@/axios/api'

export default {
  name: '',
  data(){
    return {
      maskTitle:'',
      maskData:{},
      showMask:false,
      maskWidth:'400',
      tableData:[
        // {
        //   n1:'工号',
        //   n2:'姓名',
        //   n3:'手机',
        //   n4:'邮件',
        //   n5:'性别',
        //   delete:true,
        //   changePassword:true
        // }
      ],
      orderNo:'',
      selections:true,
      lableList:{
        n1:'工号',
        n2:'姓名',
        n3:'手机',
        n4:'邮件',
        n5:'性别',
        operation:true
      },
      talLength:0,
      pageSize:15,
      pageNum:1,
      lastData:{},
      batchDeletionList:[],//批量删除用户
    }
  },
  props:[],
  created(){
    this.FnSearch()
  },
  mounted(){

  },
  methods:{
    FnSearch() {
      this.lastData = {
        orderNo : this.orderNo
      }
      this.FnPaging()
    },
    FnPaging() {
      UserList({
        orderNo:this.lastData.orderNo,
        pageNum:this.pageNum,
        pageSize:this.pageSize,
      }).then(res=>{
        if(res.state==Code) {
          this.tableData = [];
          this.talLength = res.count;
          var list = res.data.slice();
          list.forEach((v)=>{
            this.tableData.push({
              n1:v.orderNo,
              n2:v.username,
              n3:v.mobile,
              n4:v.email,
              n5:v.sex==1?'男':'女',
              delete:true,
              changePassword:true,
              row:v
            })
          })
        }
      })
    },
    FnBatchDeletion() {//批量删除
      if(this.batchDeletionList.length==0) {
        this.$message.error("请先勾选需要删除的用户")
        return
      }
      this.maskWidth = '400px'
        this.showMask = true;
        this.maskTitle = '批量删除提示'
        this.maskData = {
          defaultTitleBox:true,
          defaultTitle:'确定删除勾选的用户吗？',
          defaultBox:true,
          batchDeletion:true,
          content:this.batchDeletionList
        }
    },
    getSortableFn(e) {
      if(e.type=='delete') {
        this.maskWidth = '400px'
        this.showMask = true;
        this.maskTitle = '删除提示'
        this.maskData = {
          defaultTitleBox:true,
          defaultTitle:'确顶删除该用户吗？',
          defaultBox:true,
          deleteUser:true,
          content: {content:[e.content]}
        }
      }else if(e.type=='selection') {
        this.batchDeletionList = e.content.slice()
      }else if(e.type=='changePassword') {
        this.maskWidth = '400px'
        this.showMask = true;
        this.maskTitle = '修改密码'
        this.maskData = {
          defaultBox:true,
          adminChangePassWordBox:true,
          newPassWord:'',
          newPassWordAgain:'',
          content:e.content.row,
          orderNo:e.content.row.orderNo
        }
      }else if(e.type=='pageSize') {
        this.pageSize = e.content;
        this.FnPaging()
      }else if(e.type=='pageNum') {
        this.pageNum = e.content;
        this.FnPaging()
      }
      
    },
    FnDeleteUser(e) {//删除--提交数据
      var str = ''
      var list = e.content.slice();
      list.forEach((v,i)=>{
        if(i==0) {
          str = v.row.userId
        }else if(i==(list.length-1)) {
          str = str + ',' + v.row.userId
        }else {
          str = v.row.userId + ',' + str
        }
      })
      DeleteUser({
        data:str
      }).then(res=>{
        if(res.state==Code) {
          this.$message.success("删除用户成功");
          this.showMask = false;
          this.maskData = {};
          this.FnSearch()
        }
      })
    },
    FnAdminChangePassWord(e) {//管理员修改密码
      if (
          e.newPassWordAgain==='' ||
          e.oldPassWord === ''
        ) {
          this.$message.error("密码不能为空");
          return;
        } else if (e.newPassWordAgain != e.newPassWord) {
          this.$message.error("新密码与确认新密码不相同");
          return;
        }
        var user = JSON.parse(window.sessionStorage.getItem("user"));
        if (!user) {
          this.$message.error("请先登录");
          this.$router.push({ name: "login" });
          return;
        }
        UpdatePassword({
          newPassword: this.$md5(e.newPassWordAgain) ,
          orderNo: e.content.orderNo,
          roleId:user.data.deptId
          // _method: "patch"
        }).then(res => {
          if (res.state == Code) {
            this.$message.success("修改成功");
            this.showMask = false;
            this.maskData = {};
            this.FnSearch()
          }
        });
    },
    FnMask(e) {
      if(e.type=='false') {
        this.showMask = false;
        this.maskData = {}
      }else {
        if(e.content.deleteUser) {//删除
          this.FnDeleteUser(e.content.content)
        }if(e.content.batchDeletion) {//删除
          this.FnDeleteUser(e.content)
        }if(e.content.adminChangePassWordBox) {//管理员修改密码
          this.FnAdminChangePassWord(e.content)
        }
      }
    }
  },
  components:{
    ShowTable,
    Vmask
  },
  computed:{

  },
  watch:{

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
.user-list {
  margin-top: 15px;
}
</style>
